<#import "../main.html" as page>
<@page.main current="/dbDoc" title="Json格式化">
<style type="text/css">
    textarea {
        min-height: 60vh;
        outline: none;
        border: none;
        width: 95%;
        margin-bottom: 50px;
        resize: none;
    }

    .wrongWord {
        border: 1px solid lightcoral;
        background-color: lightcoral;
    }

    .waring {
        box-shadow: 0 0 10px lightcoral;
    }

    .divMessage {
        z-index: 1;
        box-shadow: 0 0 10px grey;
        min-width: 300px;
        max-width: 40vw;
        min-height: 100px;
        position: fixed;
        right: 50px;
        bottom: 50px;
        padding: 0 20px 20px 20px;
        background-color: white;
        overflow-x: auto;
    }
</style>

<div id="pageMSSQL" class="divPage">
    <div class="divTitleText"></div>
    <div class="divCondition">
        <div>
            <button id="btnFormat" class="jk-button mr10">格式化</button>
            <button id="btnSelect"  class="jk-button mr10">选中</button>
            <button id="btnClear"  class="jk-button mr10">清空</button>
        </div>
    </div>
    <textarea id="divDatas" class="divContent" placeholder="输入原字符串"></textarea>
    <div class="dn divMessage"></div>
</div>
<script type="text/javascript">

    $(function () {
        $("#divDatas").focus();
    });

    $("#btnSelect").bind("click", function () {
        if($("#divDatas").val()){
            $("#divDatas").select();
        }
    });

    $("#btnClear").bind("click", function(){

        $('#divDatas').val('');
        $(".divMessage").fadeOut(150);
        $("#divDatas").removeClass("waring");
    });


    $("#btnFormat").bind("click", function () {
        var content = $("#divDatas").val();
        var messageLength = 200 / 2;
        if (content) {
            try {
                var jsonStr = JSON.stringify(JSON.parse(content), null, 4);
                $("#divDatas").removeClass("waring");
                $(".divMessage").fadeOut(150);
                $("#divDatas").val(jsonStr);
            } catch (e) {
                $("#divDatas").addClass("waring");
                var errMsg = " JSON at position ";
                if (e.message.indexOf(errMsg) > -1) {
                    var position = Number(e.message.substr(e.message.indexOf(errMsg) + errMsg.length));
                    var demoBeginIndex = position > messageLength ? position - messageLength : 0;

                    $(".divMessage").html("<p>" + e.message + ":</p><label>" + content.substr(demoBeginIndex, position - demoBeginIndex)
                        + "</label><b class='wrongWord'>" + content.substr(position, 1) + "</b>"
                        + content.substr(position + 1, messageLength));
                    $(".divMessage").fadeIn(200);
                }
            }

        }
    });
</script>

</@page.main>